<template>
  <div class="page">
    <div class="box wd-friend-img" id="psuc">
      <!-- <img
        src="@/assets/image/gou.png"
        alt=""
        style="width: 70px; height: 70px"
      />
      <p style="font-size: 18px; color: rgb(180, 180, 180)">恭喜你预约成功</p> -->
      <p style="font-size: 14px; color: rgb(180, 180, 180)">
        订单号：<span class="out_trade_no">{{ query.order_id }}</span>
      </p>
      <p>以下是你的专属私人客服</p>
      <img src="@/assets/image/hand.png" alt="" style="width: 50px" />
      <!-- <p style="font-weight: 800;font-size: 16px;">长按扫码添加老师</p> -->
      <h3 id="wd-friend-img-tip" style="font-weight: 800; font-size: 16px">
        <template v-if="qrcode"> 在微信长按识别二维码添加老师 </template>
        <template v-else>长按复制添加老师 </template>
      </h3>
      <p style="color: rgb(143, 143, 143)">激活会员权益</p>
      <p style="margin-bottom: 0px; padding: 0 30px" id="wd-friend-img-src">
        <long-touch-wechat
          v-if="qrcode"
          image
          :qrcode="qrcode"
          @callback="onCopy"
        />
        <long-touch-wechat v-else :qrcode="wxno" @callback="onCopy" />
      </p>
      <p style="color: rgb(143, 143, 143)">老师将在24小时内通过好友请求</p>
    </div>
  </div>
</template>
<script>
import tpl from "@/mixins/tpl";
import LongTouchWechat from "@/components/long-touch-wechat";

export default {
  mixins: [tpl],
  components: {
    LongTouchWechat,
  },
  metaInfo() {
    return {
      title: "私人客服",
    };
  },
  data() {
    return {
      query: {},
    };
  },
  computed: {
    wxno() {
      return this.customer.contact;
    },
    qrcode() {
      const { contact_type, image_url } = this.customer;
      return [4, 5].includes(contact_type * 1) ? image_url : "";
    },
  },
  created() {
    const { query } = this.$route;
    this.query = query;
    this.init();
    this.getCus(query.id, query.type);
  },
  methods: {
    init() {
      const { query } = this.$route;
      this.getTplInfo(query.id, query.type);
      this.getCus(query.id, query.type);
    },
    onCopy() {
      this.adBehavior("copy");
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 18px;
  background: #7db9c3;
}
.box {
  text-align: center;
  background: #fff;
  padding: 25px 0;
  line-height: 1.5;
}

p {
  margin: 5px 0px;
}
</style>
